.mosaic-tile {
  animation: fadein 0.15s;
}

.mosaic-window-toolbar {
  & > div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 5px 0 5px;

    .mosaic-controls {
      transform: scale(0.75);
      transform-origin: right;
    }

    h5 {
      margin: 4px 0 0 0;
    }

    button {
      margin-left: 8px;
    }
  }
}

// Set the toolbar text colour based on the mosaic's
// current severity level.
//    Hint=1,
//    Info=2,
//    Warning=4,
//    Error=8
.mosaic-toolbar-severity-level-8 {
  color: @red4;
}

.mosaic-toolbar-severity-level-4 {
  color: @orange4;
}

// TODO: support new file
// update if list of Editor ID changes
@editor-ids: main\.js, renderer\.js, index\.html, preload\.js, styles\.css;

// takes each editor ID and increase its z-index if the parent Mosaic root
// has focused__id class for that specific id.
each(@editor-ids, {
  .focused__@{value}.mosaic .mosaic-window.@{value} {
    z-index: 2;
  }
});

.mosaic-window {
  z-index: 1;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
